<template>
  <div class="home">
    <header class="topDiv">
        <Header/>
    </header>
    <div ref="centerDiv" class="centerDiv">
          <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import Header from '@/components/header'

import { useScrollTopStore } from "@/stores/scrollTop";
const { handleScroll } = useScrollTopStore()

const count = ref(0)

const centerDiv = ref(null)
 

 
// 在组件挂载时添加事件监听器
onMounted(() => {
    centerDiv.value.addEventListener('wheel', (event) => {
      handleScroll(event, centerDiv);
    })
})
</script>

<style lang="scss">
.home {
      font-size: 1.5rem;
      .topDiv {
          font: 400 20px '优设标题黑';
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
          position: fixed;
          top: 1.25rem;
          // top: 0;
          background-color: var(--ground-glass-background-color);
          // height: 50px;
          z-index: 10;
      }
      .centerDiv {
          background-color: var(--ground-glass-background-color);
          overflow-y: auto; // 如果需要，允许内容垂直滚动
          height: calc(100vh); // 可选，设置内容区域的高度为视口高度减去导航栏高度
          /* 定义过渡效果 */
      }
      .centerDiv::-webkit-scrollbar {
    width:8px;
 }
 /* 滚动槽 */
 .centerDiv::-webkit-scrollbar-track {
    -webkit-box-shadow:rgba(254,254,254,1);
    border-radius:10px;
    background-color: var(--scrollInside-background-color);
    
 }
 /* 滚动条滑块 */
 .centerDiv::-webkit-scrollbar-thumb {
    border-radius:3px;
    background-color: var(--scroll-background-color);
 }
}

</style>